<template>
  <div class="videoDetails">
    <!-- 标题栏 -->
    <mt-header fixed :title="title">
      <mt-button icon="back" slot="left" v-on:click="goBack"></mt-button>
    </mt-header>

    <!-- 用来给标题栏占位 -->
    <div style="height: 2.75rem;width: 100%;"></div>

    <!-- 播放器 -->
    <video-player
      class="video-player-box"
      ref="videoPlayer"
      :options="playerOptions"
      :playsinline="true"
      customEventName="customstatechangedeventname"
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)"
      @statechanged="playerStateChanged($event)"
      @ready="playerReadied"
    >
    </video-player>
    <!-- 标题 -->
    <div class="titleLayout">
      <div class="introduceLayout">
        <p>简介</p>
        <div style="background-color: #FF0000; width: 100%; height: 1px;"></div>
      </div>
    </div>

    <!-- 内容介绍 -->
    <!-- <div class="contextLayout"> -->
    <!-- 封面 -->
    <!-- <div class="contextImg"></div> -->
    <!-- 文字内容 -->
    <!-- 			<div class="contextTextLayout">
				<p>入门级日语培训/川师校园内/灵活排课日语培训</p>
				<p>黄伟</p>
				<p>简介：细细分析日语中你没有发现的细节，从每个角度深度剖析日语盲点问题</p>
				<p>播放次数:12.5万次</p>
			</div>
		</div> -->

    <!-- 内容介绍 -->
    <div class="contextLayout">
      <div class="contextDiv">
        <p>{{ videoList.title }}</p>
        <!-- 文字内容 -->
        <div class="contextTextLayout">
          <!-- 封面 -->
          <div
            class="contextImg"
            :style="{ backgroundImage: 'url(' + videoList.picture + ')' }"
          ></div>
          <div class="contextText">
            <p>{{ videoList.teach }}</p>
            <p>简介：{{ videoList.brief }}</p>
            <p>播放次数:{{ videoList.nums }}次</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      // 视频播放器设置
      playerOptions: {
        // videojs options
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, //默认消除音频
        language: "zh-CN",
        playbackRates: [0.7, 1.0, 1.5, 2.0], //倍速
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4",
            src: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
          }
        ],
        preload: "auto",
        poster: require("../../assets/banner.png"), //封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      },
      title: "视频标题",
      videoId: 1,
      videoList: [
        {
          title: "入门级日语培训/川师校园内/灵活排课日语培训",
          teach: "黄伟",
          brief:
            "细细分析日语中你没有发现的细节，从每个角度深度剖析日语盲点问题",
          picture:
            "https://jpanese-project.oss-cn-chengdu.aliyuncs.com/public/myclass1.png",
          nums: "12500"
        }
      ],
      playerStatus: ""
    };
  },
  mounted() {
    console.log("this is current player instance object", this.player);
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    }
  },
  created() {
    this.selectVideoDetails();
  },
  methods: {
    // listen event
    onPlayerPlay(player) {
      if (this.playerStatus == 1) {
        console.log("player play!", player);
      } else {
        Toast("无权限观看");
        this.$refs.videoPlayer.player.pause(); // 暂停
      }
    },
    onPlayerPause(player) {
      console.log("player pause!", player);
    },
    // ...player event
    // or listen state event
    playerStateChanged(playerCurrentState) {
      console.log("player current update state", playerCurrentState);
    },

    // player is ready
    playerReadied(player) {
      console.log("the player is readied", player);
      // you can use it to do something...
      // player.[methods]
    },
    goBack() {
      this.$router.go(-1);
    },
    selectVideoDetails() {
      //获取录播课详情
      let me = this;
      this.$axios
        .post(
          "/api/apply/lesson_train_details",
          { le_id: this.videoId, uid: localStorage.uid },
          { emulateJSON: true }
        )
        .then(kun => {
          console.log(kun);
          if (kun.code == 200) {
            me.videoList = kun.data;
            me.playerOptions.sources.src = kun.data.video;
            me.playerOptions.poster = kun.data.picture;
            me.title = kun.data.title;
            me.playerStatus = kun.total;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}

// 标题栏
.mint-header {
  height: 2.75rem;
  line-height: 1.25;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff7f5f+25,e5274d+75 */
  background: rgb(255, 127, 95);
  /* Old browsers */
  background: -moz-linear-gradient(
    -45deg,
    rgb(255, 127, 95) 25%,
    rgb(229, 39, 77) 75%
  );
  /* FF3.6-15 */
  background: -webkit-linear-gradient(
    -45deg,
    rgb(255, 127, 95) 25%,
    rgb(229, 39, 77) 75%
  );
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    135deg,
    rgb(255, 127, 95) 25%,
    rgb(229, 39, 77) 75%
  );
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7f5f', endColorstr='#e5274d', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}

// 播放器中间的播放按钮位置调整
/deep/ .video-js .vjs-big-play-button {
  top: 40%;
  left: 38%;
}

.titleLayout {
  width: 100%;
  height: 1.875rem;
  box-shadow: 0rem 0.125rem 0.5rem rgba(0, 0, 0, 0.05);

  .introduceLayout {
    width: 3.3125rem;
    height: 100%;

    p {
      text-align: center;
      line-height: 1.8125rem;
      font-size: 0.75rem;
      color: #ff0000;
    }
  }
}

.contextLayout {
  width: 21.5625rem;
  height: 8.5625rem;
  margin: 0 auto;
  margin-top: 0.9375rem;
  box-shadow: 0rem 0.125rem 0.5rem rgba(0, 0, 0, 0.05);

  .contextDiv {
    width: 20.3125rem;
    height: 8.4375rem;
    margin: 0 auto;
    padding-top: 0.625rem;

    > p {
      font-size: 0.75rem;
      color: #343434;
      font-weight: 600;
    }

    .contextTextLayout {
      margin-top: 0.625rem;
      display: flex;
      justify-content: flex-start;

      .contextImg {
        width: 9.1875rem;
        height: 5.625rem;
        background-image: url(https://jpanese-project.oss-cn-chengdu.aliyuncs.com/public/myclass1.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        overflow: hidden;
      }

      .contextText {
        width: 10rem;
        margin-left: 0.625rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        p {
          font-size: 0.625rem;
          color: #999999;
        }
      }
    }
  }
}
</style>
